<template>

  <div style="text-align: center">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in imgs" :key="item">
        <el-image
          style="width: 800px; "
          :src="item"
          fit="contain"></el-image>
      </el-carousel-item>
    </el-carousel>

    <div style="height: 50px"></div>

    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">致力于为广大朋友提供帮助，欢迎大家的参与和加入，在这里我们将爱好集中于此</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">ee</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">r</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple">友情链接
        <ul>
          <li><a href="www.baidu.com">www.baidu.com</a></li>
          <li><a href="www.baidu.com">www.csdn.com</a></li>
          <li><a href="www.baidu.com">www.cina.com</a></li>
          <li><a href="www.baidu.com">www.google.com</a></li>
          <li><a href="www.baidu.com">www.mail.com</a></li>

        </ul>
      </div></el-col>
    </el-row>

  </div>
</template>

<script>
import instance from "../utils/request";

import img1 from "../assets/img/index/1.jpg";
import img2 from "../assets/img/index/2.jpg";
import img3 from "../assets/img/index/3.jpg";
import img4 from "../assets/img/index/4.jpg";


export default {
  name: "Index",
  data(){
    return{
      imgs:[img1,img2,img3,img4]
    }
  },
  methods:{
    test(){
      instance.get("/user/test").then(res=>{
        console.log(res);
      }).catch(err=>{
        alert(err);
      })
    }
  }
}
</script>

